<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />




    <link rel="stylesheet" href="../content/css/font.css">
    <link rel="stylesheet" href="../content/css/xadmin.css">
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap.min.css">
    <link rel='stylesheet' href='../content/plugin/bootstrap/css/style.css' />

    <script src="../content/js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="../content/js/xadmin.js"></script>
    <script type="text/javascript" src="../content/js/cookie.js"></script>
    <script src="../content/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../content/plugin/bootstrap/css/bootstrap-select.css">
    <script src="../content/plugin/bootstrap/js/bootstrap-select.js"></script>


<body>
    <div class="app">
        <div class="x-nav">

            <span class="nav-header">
                <a href="">首页</a>>
                <a href="">系统管理</a>>
                <a>
                    <cite>用户管理</cite></a>
            </span>

        </div>
        <div class="x-body">
            <div class="layui-row">

                <input type="text" v-model="search.username" placeholder="请输入用户名" autocomplete="off"
                    style="height:30px;width: 100px;">
                <button class="layui-btn" v-on:click="getdata"><i class="layui-icon">&#xe615;</i></button>

            </div>
            <hr />
            <div>

                <button class="layui-btn" v-on:click="add"><i class="layui-icon"></i>添加</button>

            </div>
            <hr />
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>

                            <th>ID</th>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>角色</th>
                            <th>时间</th>
                            <th>是否启用</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="uitem in arrayData">

                            <td>{{uitem.id}}</td>
                            <td>{{uitem.username}}</td>
                            <td>{{uitem.truename}}</td>
                            <td>{{uitem.jiaosename}}</td>
                            <td>{{uitem.createtime}}</td>

                            <td>
                                <span v-if="uitem.state==1">是</span>
                                <span v-if="uitem.state==0">否</span>
                            </td>
                            <td class="td-manage">

                                <a title="" v-on:click="vupdate(uitem)" href="javascript:;">
                                    修改
                                </a>
                                <a title="删除" v-on:click="vdel(uitem)" href="javascript:;">
                                    <i class="layui-icon">&#xe640;</i>
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="page">
                <div>
                    <vue-nav :cur="search.page" :all="all" :allcount="allcount" :callback="callback"></vue-nav>
                </div>
            </div>

        </div>


        <!--添加-->
        <div class="modal fade" id="addbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">添加信息</h4>
                    </div>
                    <div class="modal-body">
                        <form action="" v-on:submit.prevent="insert">
                            <fieldset>


                                <div class="control-group">
                                    <label for="input01" class="control-label">用户名</label>
                                    <div class="controls">
                                        <input placeholder="" type="text" required class="form-control"
                                            v-model="addobj.username">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">角色</label>
                                    <div class="controls">
                                        <select v-model="addobj.jiaoseid" class="form-control">
                                            <option value="0">
                                                请选择
                                            </option>
                                            <option v-for="item in menulist" :value='item.id'>
                                                {{item.jiaosename}}
                                            </option>
                                        </select>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">密码</label>
                                    <div class="controls">
                                        <input placeholder="" type="text" required class="form-control"
                                            v-model="addobj.password">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label for="input01" class="control-label">是否启用</label>
                                    <div class="controls">
                                        <select v-model="addobj.state" required class="form-control">
                                            <option value="">
                                                请选择
                                            </option>
                                            <option v-for="item in statelist" :value='item.id'>
                                                {{item.name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>




                            </fieldset>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="button" class="btn btn-primary" v-on:click="insert()">确认</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--添加结束-->
        <!--修改-->
        <div class="modal fade" id="editbox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content" id="myModal">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                    </div>
                    <div class="modal-body">
                        <fieldset>
                            <div class="control-group">
                                <label for="input01" class="control-label">姓名</label>
                                <div class="controls">
                                    <input placeholder="" type="text" class="form-control" v-model="editobj.truename">
                                </div>
                            </div>

                            <div class="control-group">
                                <label for="input01" class="control-label">角色</label>
                                <div class="controls">
                                    <select v-model="editobj.jiaoseid" class="form-control">
                                        <option value="0">
                                            请选择
                                        </option>
                                        <option v-for="item in menulist" :value='item.id'>
                                            {{item.jiaosename}}
                                        </option>
                                    </select>
                                </div>
                            </div>

                            <div class="control-group">
                                <label for="input01" class="control-label">是否启用</label>
                                <div class="controls">
                                    <select v-model="editobj.state" class="form-control">
                                        <option value="">
                                            请选择
                                        </option>
                                        <option v-for="item in statelist" :value='item.id'>
                                            {{item.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>



                        </fieldset>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" v-on:click="update()">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--修改结束-->



    </div>
</body>



<script src="../content/js/config.js"></script>
<link href="../content/plugin/sweetalert/sweetalert.css" rel="stylesheet">
<script src="../content/plugin/sweetalert/sweetalert.min.js"></script>
<script src="../content/plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../content/js/vue2.js"></script>
<script src="../content/js/vue-nav.js"></script>
<script src="../content/js/config.js"></script>
<script>

    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    var vm = new Vue({
        el: ".app",
        data: {

            all: 0,
            arrayData: [],
            allcount: 0,
            menulist: [],
            cliniclist: [],
            departmentlist: [],
            positionlist: [],
            addobj: {
                mid: 0,

                clinicname: "",
                state: 1
            },
            editobj: {},
            search: {
                page: 1,
                size: 10,
                mid: "0"
            },
            statelist: [{ "id": 1, "name": "是" }, { "id": 0, "name": "否" }],
            datalist: []
        },
        components: {
            'vue-nav': Vnav
        },
        methods: {
            getdepartmentlist: function (addobj) {
                var self = this;
                $.post(apiurl + "/quanxian/getdicbycode", { code: "department" }, function (data) {
                    self.departmentlist = data.data;
                });
            },
            getpositionlist: function (id) {
                var self = this;
                $.post(apiurl + "/quanxian/getdicbycode", { code: "position" }, function (data) {
                    $('#' + id).html("");
                    for (var i = 0; i < data.data.length; i++) {
                        var name = data.data[i].value;
                        $('#' + id).append("<option>" + name + "</option>")
                    }
                    $('#' + id).selectpicker('refresh');
                });
            },
            getcliniclist: function (addobj) {
                var self = this;

                $.post(apiurl + "/api/cliniclist", { currentPage: 1, rows: 50 }, function (data) {

                    self.cliniclist = data.data;

                });
            },
            getmenulist: function (addobj) {
                var self = this;

                $.post(apiurl + "/admin/getjiaoselist", {}, function (data) {

                    self.menulist = data.data;

                });
            },
            getxiangmulist: function (id) {
                var self = this;

                $.post(apiurl + "/quanxian/getdicbycode", { code: "project" }, function (data) {
                    $('#' + id).html("");
                    for (var i = 0; i < data.data.length; i++) {
                        var name = data.data[i].value;
                        $('#' + id).append("<option>" + name + "</option>")
                    }
                    $('#' + id).selectpicker('refresh');


                });
            },
            add: function () {


                this.getmenulist();


                $("#addbox").modal('show');
            },
            insert: function () {


                var self = this;


                this.addobj.id = "";


                $.post(apiurl + "/admin/manage/add", this.addobj, function (data) {
                    if (data.status == 200) {
                        $("#addbox").modal('hide');
                        swal("success", "添加成功", "success");
                        self.getdata("");
                    } else {
                        swal("系统提示", data.message, "error");
                    }

                });
            },
            getdata: function (_keycontent) {  //查询数据

                var self = this;
                $.post(apiurl + "/admin/manage/list", this.search, function (_result) {
                    console.log(_result);
                    self.arrayData = _result.data;
                    self.all = _result.allcount;
                    self.allcount = _result.count;
                });

            },
            callback: function (data) {
                var self = this;
                this.search.page = data;
                $.post(apiurl + "/admin/manage/list", this.search, function (_result) {
                    self.arrayData = _result.data;
                    self.all = _result.allcount;
                    self.allcount = _result.count;
                });
            },
            vupdate: function (uitem) {
                $("#editbox").modal('show');

                this.getmenulist();



                setTimeout(() => {

              

                    this.editobj = uitem;

                    console.log("haoqig", uitem);

                }, 1000);


            },
            update: function () {
                var self = this;

                if ($("#zhiweiedit").val() != null) {
                    this.editobj.position = $("#zhiweiedit").val().join(",");
                }
                if ($("#xiangmuedit").val() != null) {
                    this.editobj.jineng = $("#xiangmuedit").val().join(",");
                }
                this.editobj.token = json.token;
                $.post(apiurl + "/admin/manage/edit", this.editobj, function (data) {
                    if (data.status == 200) {
                        $("#editbox").modal('hide');
                        swal("success", "修改成功", "success");
                        self.getdata("");
                    } else {
                        swal("系统提示", data.message, "error");
                    }

                });

            },
            vdel: function (uitem) {
                var self = this;
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: '否',
                    closeOnConfirm: false
                }, function () {


                    $.ajax({
                        url: apiurl + '/admin/manage/del',
                        type: 'DELETE',
                        data: { "ids": uitem.id },
                        success: function (result) {
                            if (result.status == 200) {
                                swal("系统提示", "已删除", "success");
                                self.getdata("");
                            } else {
                                swal("系统提示", "系统异常", "success");
                            }
                        }
                    });

                });
            }




        },

        created: function () {  //初始化事件里边去调用查询方法
            this.getdata("");



        }
    });


</script>